<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            border: 1px solid #ccc;
            width: 980px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <my-layout> -->
            <!-- 相当于一个容器 -->
            <!-- slotProps是一个对象，自己命名 -->
            <!-- <template v-slot:header="slotProps">
                {{slotProps}}
                <p>id:{{slotProps.id}}</p>
            </template>
            
        </my-layout>

         <my-layout> 
           <template v-slot:header="{id:i,msg}">
               {{i}} - {{msg}}
            </template>
        </my-layout> -->


        <my-layout> 
            <template v-slot:header="content">
                {{content}}
             </template>
         </my-layout>
        <my-layout> 
            <!-- 这个id应该是我对象里面已经存在的东西，这样我的对象里面如果有值就直接用能够值，
            没有就直接用默认值，就相当于赋值 -->
            <template v-slot:header="{id = {a:'111'}}">
                {{id}}
             </template>
         </my-layout>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 希望子组件能够把内部的数据暴露出来，父组件根据这个暴露出的数据，
        // 决定往插槽中填入什么内容
        Vue.component("MyLayout",{
            template: `<div class="container">
                            <div class="header">
                                <slot name="header" :id="id" msg="child"></slot>
                            </div>
                        </div>`,
            data(){
                return{
                    // id:1234567
                    id:{
                        a:123
                    }
                }
            }
        })

        var vm = new Vue({
            el:"#app",
            data: {

            }
        })
    </script>
</body>
</html>